<div class="widget-body gauge-body {{ widget_extra_css_class }}" id="widget-body-{{ widget_pk }}-gauge-{{gauge.pk}}">
    <div class="main-chart-area" style="height:450px; width:100%;">
        <div id="chart-container-{{ widget_pk }}-{{gauge.pk}}" class="gauge-container" style="width: 100%; height:100%;" data-id="{{ item.web_id }}-{{ uuid }}" data-params='{{gauge.gauge_params}}' >
            <div class="chart-placeholder"><div class="loading-gauge" style="vertical-align: middle;">Loading gauge...</div></div>
            <div class="gauge-title" style="display: none; text-align: center; font-size: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; position: relative; width: 100%; top: -14px; cursor: default;">{{item.label}} ({{item.unit}})</div>
        </div>
    </div>
</div>
